import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import request from '../../../utils/request'
import Item from  '../../../components/Item'
import '../../../api/index'
import {useNavigate} from 'react-router-dom'
import { SETLIST, ALLSTATE,STATELISTTYPE } from '../../../types/store.d'

//vant 引入
import { Swiper, Toast, Grid } from 'react-vant';
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
export const items = colors.map((color, index) => (
    <Swiper.Item key={color}>
        <div
            onClick={() => {
                Toast.info(`你点击了卡片 ${index + 1}`);
            }}
        >
            {index + 1}
        </div>
    </Swiper.Item>
))





export default function Index() {

    const dispatch = useDispatch()
    const navigate = useNavigate()

    useEffect(() => {
        request.get('/api/list').then(res => {
            console.log(res.data.list);

            //派发数据给仓库
            dispatch({
                type: SETLIST,
                payload: res.data.list
            })
        })
    }, [])

    //获取仓库数据
    const listData = useSelector((state: ALLSTATE) => {
        return state.list
    })


    //点击跳转
    const handleClick=(params:STATELISTTYPE)=>{
        //跳转页面
        navigate('/home/class',{
            state:params
        })
    }


    return (
        <div>
            <header>
                <div className="demo-swiper">
                    <Swiper autoplay={5000}>{items}</Swiper>
                </div>

            </header>
            <main>
                <Grid columnNum={5}>
                    {Array.from({ length: 10 }, (_, i) => (
                        <Grid.Item key={i} text="文字" />
                    ))}
                </Grid>
                <ul>
                    {/* {
                        listData && listData.length > 0 ? listData.map((item, index) => {
                            return <Item key={index}   dataScrop={item}></Item>
                        }) : '无数据'
                    } */}
                    <ul>
        {
          listData.map((item, index) => {
            return <li key={index} onClick={() => handleClick(item)}>{item.user}</li>
          })
        }
      </ul>
                </ul>
            </main>
            <footer></footer>


        </div>
    )
}
